<template>
  <div class="order-wrapper">
  	<mt-header fixed title="障碍管理">
      <router-link to="/home/my" slot="left">
		    <mt-button icon="back">返回</mt-button>
		  </router-link>
    </mt-header>
    <div class="order-wrapper-context">
      <div>
        <mt-navbar v-model="active">
          <mt-tab-item id="allhazard">障碍点</mt-tab-item>
          <mt-tab-item id="myhazard">我的障碍点</mt-tab-item>
        </mt-navbar>
      </div>
      <div class="myhazard-content">
        <mt-tab-container v-model="active" >
          <mt-tab-container-item id="allhazard">
            <mt-cell v-for="(item, index) in this.hazard" title="这是个地点" is-link :label="item.positiontime" value="限高"></mt-cell>
          </mt-tab-container-item>
          <mt-tab-container-item id="myhazard">
            <mt-cell v-for="(item, index) in this.myhazard" title="这是个地点" is-link :label="item.positiontime" value="限高"></mt-cell>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/api/axios';
import { TabContainer, TabContainerItem, Toast, CellSwipe} from 'mint-ui';
export default {
	data: function () {
		return {
      hazard: null,
      myhazard: null,
      _allhazard:false,
      _myhazard:false,
      active: 'allhazard',
      myhazardsettimeout: null,
      allhazardsettimeout: null
    }
  },
  created: function () {
    this.getMyHazard();
    this.getAllHazard();
    this.hazardTimer();
  },
  destroyed: function (){
    clearInterval(this.myhazardsettimeout);
    clearInterval(this.allhazardsettimeout);
  },
  methods: {
    getAllHazard: function () {
      var setting = {
        method: 'GET',
        url: '/putTruckObstacle'
      };
      axios.call(this, (res) => { this.getAllHazardCallback(res); } , {setting: setting});
    },
    getAllHazardCallback: function (res) {
      if(res.code === 0){
        this._allhazard = true;
        this.hazard = res.data;
      }else{
        this._allhazard = false;
      }
    },
    getMyHazard: function () {
      var data ={
        pointgrp: 'get_state',
        phone: this.$store.state.user.userid
      };
      var setting = {
        method: 'POST',
        url: '/getsetObstaclePoint'
      };
      axios.call(this, (res) => { this.getMyHazardCallback(res); }, {setting: setting, data: data});
    },
    getMyHazardCallback: function (res) {
      if(res.code === 0){
        this._myhazard = true;
        this.myhazard = res.data;
      }else{
        this._myhazard = false;
      }
    },
    hazardTimer: function () {
      this.myhazardsettimeout = setInterval(() => { this.getMyHazard(); }, 20000);
      this.allhazardsettimeout = setInterval(() => { this.getAllHazard(); }, 20000);
    },
    test: function () {
      console.log(1111);
    }
    //函数写在上面↑
  }
}
</script>

<style>
 @import '../../assets/css/mypages/my.css';
</style>
